.q-field
  margin-top 16px
  margin-bottom 8px
  .q-if
    margin-top 0 !important
    margin-bottom 0 !important

.q-field-icon
  width $field-icon-size
  height $field-icon-size
  min-width $field-icon-size
  font-size $field-icon-size
  margin-right 16px
  color $field-label-color

.q-field-label
  padding-right 8px
  color $field-label-color
.q-field-label-inner
  min-height $field-icon-size
.q-field-label-hint
  padding-left 8px

.q-field-bottom
  font-size 12px
  padding-top 8px
  color rgba(0, 0, 0, .46)
.q-field-no-input
  margin-top 8px
  border-top 1px solid rgba(0, 0, 0, .12)
.q-field-counter
  color $field-label-color
  padding-left 8px

.q-field-dark
  .q-field-label, .q-field-icon, .q-field-counter, .q-field-bottom
    color rgba(255, 255, 255, 60%)
  .q-field-no-input
    border-top 1px solid rgba(255, 255, 255, .7)

.q-field-with-error
  .q-field-icon, .q-field-label, .q-field-bottom
    color $negative
  .q-field-no-input
    border-top 1px solid $negative

@media (max-width $breakpoint-xs-max)
  .q-field-label + .q-field-content
    padding-top 8px
  .q-field-floating.q-field-no-label
    .q-field-margin
      margin-top 12px
  .q-field-no-label .q-field-label
    display none

@media (min-width $breakpoint-sm-min)
  .q-field-floating
    .q-field-margin
      margin-top 12px
  .q-field-label + .q-field-content
    padding-top 0
